<!--
  产品管理页面组件
  负责展示产品列表、搜索产品、查看产品详情、编辑产品信息等功能
-->
<template>
  <!-- 搜索区域 -->
  <div class="search-container">
    <!-- 搜索表单卡片 -->
    <el-card shadow="never" class="search-card">
      <!-- 表单容器 -->
      <el-form :inline="true" :model="searchForm" class="search-form" label-width="80px">
        <!-- 产品名称搜索项 -->
        <el-form-item label="产品名称">
          <el-input v-model="searchForm.product_name" placeholder="请输入产品名称" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 产品编码搜索项 -->
        <el-form-item label="产品编码">
          <el-input v-model="searchForm.product_code" placeholder="请输入产品编码" clearable @keyup.enter="handleSearch"
            class="search-input" />
        </el-form-item>

        <!-- 产品分类搜索项 -->
        <el-form-item label="产品分类">
          <el-tree-select
            v-model="searchForm.category_id"
            :data="categoryTreeData"
            placeholder="请选择产品分类"
            clearable
            @change="handleSearch"
            class="search-select"
            node-key="category_id"
            :props="categoryTreeProps"
            check-strictly
            style="width: 200px;"
          />
        </el-form-item>

        <!-- 操作按钮组 -->
        <el-form-item class="button-group">
          <!-- 搜索按钮 -->
          <el-button type="primary" @click="handleSearch" class="search-button">
            <el-icon>
              <Search />
            </el-icon>
            搜索
          </el-button>
          <!-- 重置按钮 -->
          <el-button @click="handleReset" class="reset-button">
            <el-icon>
              <Refresh />
            </el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

  <!-- 表格区域 -->
  <el-card class="table-card">
    <!-- 表格头部 -->
    <template #header>
      <div class="table-header">
        <span>产品列表</span>
        <div>
          <!-- 批量导入按钮 -->
          <el-button type="success" @click="handleImport" class="import-button">
            <el-icon>
              <Upload />
            </el-icon>
            批量导入
          </el-button>
          <!-- 批量删除按钮 -->
          <el-button type="danger" @click="handleBatchDelete" :disabled="selectedProducts.length === 0" class="batch-delete-button">
            <el-icon>
              <Delete />
            </el-icon>
            批量删除
          </el-button>
          <!-- 新增产品按钮 -->
          <el-button type="primary" @click="handleAdd">
            <el-icon>
              <Plus />
            </el-icon>
            新增产品
          </el-button>
        </div>
      </div>
    </template>

    <!-- 产品数据表格 -->
    <el-table border :data="productList" :show-overflow-tooltip="true" v-loading="loading" class="product-table" @selection-change="handleSelectionChange">
      <!-- 多选列 -->
      <el-table-column type="selection" width="55" />
      <!-- 产品编码列 -->
      <el-table-column prop="product_code" label="产品编码" min-width="150" />
      <!-- 产品名称列 -->
      <el-table-column prop="product_name" label="产品名称" min-width="150" />
      <!-- 产品规格列 -->
      <el-table-column prop="specifications" label="规格" min-width="120" />
      <!-- 产品分类列 -->
      <el-table-column prop="category_name" label="产品分类" min-width="120">
        <template #default="{ row }">
          <span v-if="row.category">{{ row.category.category_name }}</span>
          <span v-else-if="row.category_id">{{ getCategoryName(row.category_id) }}</span>
          <span v-else>未分类</span>
        </template>
      </el-table-column>
      <!-- 成本价列 -->
      <el-table-column prop="cost_price" label="成本价" min-width="100" class-name="price-column">
        <template #default="{ row }">
          ¥{{ row.cost_price || '-' }}
        </template>
      </el-table-column>
      <!-- 零售价列 -->
      <el-table-column prop="retail_price" label="零售价" min-width="100" class-name="price-column">
        <template #default="{ row }">
          ¥{{ row.retail_price || '-' }}
        </template>
      </el-table-column>
      <!-- 批发价列 -->
      <el-table-column prop="wholesale_price" label="批发价" min-width="100" class-name="price-column">
        <template #default="{ row }">
          ¥{{ row.wholesale_price || '-' }}
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" min-width="240" fixed="right">
        <template #default="{ row }">
          <!-- 查看按钮 -->
          <el-button type="info" size="small" @click="handleView(row)">
            查看
          </el-button>
          <!-- 编辑按钮 -->
          <el-button type="primary" size="small" @click="handleEdit(row)">
            编辑
          </el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" size="small" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"
        :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
        @current-change="handlePageChange" @size-change="handleSizeChange" />
    </div>
  </el-card>

  <!-- 产品详情对话框 -->
  <el-dialog v-model="detailDialogVisible" title="产品详情" width="700px" :close-on-click-modal="false">
    <!-- 详情内容区域（带加载状态） -->
    <div v-loading="detailLoading" class="detail-container">
      <!-- 产品详情描述列表 -->
      <el-descriptions :column="1" border>
        <!-- 产品编码项 -->
        <el-descriptions-item label="产品编码">
          {{ productDetail.product_code || '-' }}
        </el-descriptions-item>
        <!-- 产品名称项 -->
        <el-descriptions-item label="产品名称">
          {{ productDetail.product_name || '-' }}
        </el-descriptions-item>
        <!-- 成本价项 -->
        <el-descriptions-item label="成本价">
          ¥{{ productDetail.cost_price || '-' }}
        </el-descriptions-item>
        <!-- 零售价项 -->
        <el-descriptions-item label="零售价">
          ¥{{ productDetail.retail_price || '-' }}
        </el-descriptions-item>
        <!-- 批发价项 -->
        <el-descriptions-item label="批发价">
          ¥{{ productDetail.wholesale_price || '-' }}
        </el-descriptions-item>
        <!-- 产品分类项 -->
        <el-descriptions-item label="产品分类">
          <span v-if="productDetail.category">{{ productDetail.category.category_name }}</span>
          <span v-else-if="productDetail.category_id">{{ getCategoryName(productDetail.category_id) }}</span>
          <span v-else>未分类</span>
        </el-descriptions-item>
        <!-- 产品规格项 -->
        <el-descriptions-item label="产品规格">
          {{ productDetail.specifications || '-' }}
        </el-descriptions-item>
        <!-- 创建时间项 -->
        <el-descriptions-item label="创建时间">
          {{ productDetail.created_at || '-' }}
        </el-descriptions-item>
        <!-- 更新时间项 -->
        <el-descriptions-item label="更新时间">
          {{ productDetail.updated_at || '-' }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="handleEditFromDetail">
          编辑产品
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑产品对话框 -->
  <el-dialog v-model="editDialogVisible" :title="editingProduct.product_id ? '编辑产品' : '新增产品'" width="500px"
    :close-on-click-modal="false" @close="handleEditClose">
    <!-- 编辑表单（带加载状态） -->
    <el-form ref="editFormRef" :model="editingProduct" :rules="editRules" label-width="80px" v-loading="editLoading">
      <!-- 产品名称表单项 -->
      <el-form-item label="产品名称" prop="product_name">
        <el-input v-model="editingProduct.product_name" placeholder="请输入产品名称" />
      </el-form-item>

      <!-- 成本价表单项 -->
      <el-form-item label="成本价" prop="cost_price">
        <el-input v-model.number="editingProduct.cost_price" placeholder="请输入成本价" type="number">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <!-- 零售价表单项 -->
      <el-form-item label="零售价" prop="retail_price">
        <el-input v-model.number="editingProduct.retail_price" placeholder="请输入零售价" type="number">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <!-- 批发价表单项 -->
      <el-form-item label="批发价" prop="wholesale_price">
        <el-input v-model.number="editingProduct.wholesale_price" placeholder="请输入批发价" type="number">
          <template #append>元</template>
        </el-input>
      </el-form-item>

      <!-- 产品分类表单项 -->
      <el-form-item label="产品分类" prop="category_id">
        <!-- 使用树形选择器替换原来的普通选择器 -->
        <el-tree-select
          v-model="editingProduct.category_id"
          :data="categoryTreeData"
          placeholder="请选择产品分类"
          style="width: 100%"
          node-key="category_id"
          :props="categoryTreeProps"
          check-strictly
          clearable
        />
      </el-form-item>

      <!-- 产品规格表单项 -->
      <el-form-item label="产品规格" prop="specifications">
        <el-input v-model="editingProduct.specifications" placeholder="请输入产品规格" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave" :loading="saveLoading">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 批量导入对话框 -->
  <el-dialog v-model="importDialogVisible" title="批量导入产品" width="500px" :close-on-click-modal="false">
    <el-form ref="importFormRef" :model="importForm" label-width="100px">
      <!-- 文件上传表单项 -->
      <el-form-item label="选择Excel文件" prop="file">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          drag
          :auto-upload="false"
          :on-change="handleFileChange"
          :on-remove="handleFileRemove"
          :limit="1"
          accept=".xlsx,.xls"
        >
          <el-icon class="el-icon--upload">
            <UploadFilled />
          </el-icon>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              请上传.xlsx或.xls格式的Excel文件
            </div>
          </template>
        </el-upload>
      </el-form-item>

      <!-- 下载模板按钮 -->
      <el-form-item>
        <el-button type="primary" link @click="downloadTemplate">
          <el-icon>
            <Download />
          </el-icon>
          下载导入模板
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 对话框底部操作区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="importDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleImportSubmit" :loading="importLoading">
          导入
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
/**
 * 产品管理页面组件选项配置
 */
defineOptions({
  name: 'ProductView'
})

// 从Vue中导入所需的API
import { ref, reactive, onMounted } from 'vue'

// 导入Element Plus组件和相关API
import { ElMessage, ElMessageBox } from 'element-plus'
import * as XLSX from 'xlsx';

// 导入图标组件
import { Search, Refresh, Plus, Upload, UploadFilled, Download, Delete } from '@element-plus/icons-vue'

// 导入产品相关的API函数
import {
  getProductList,
  getProductById,
  createProduct,
  updateProduct,
  deleteProduct,
  importProducts,
  batchProductOperation
} from '@/api/Products'

// 导入产品分类相关的API函数
import {
  getProductCategoryList
} from '@/api/ProductCategories'

// 响应式数据定义
const productList = ref([])           // 产品列表数据
const loading = ref(false)             // 列表加载状态
const total = ref(0)                   // 总数据条数
const currentPage = ref(1)             // 当前页码
const pageSize = ref(10)               // 每页条数
const selectedProducts = ref([])      // 选中的产品列表

// 搜索表单数据
const searchForm = reactive({
  product_name: '',      // 产品名称搜索条件
  product_code: '',      // 产品编码搜索条件
  category_id: '',       // 产品分类ID搜索条件
})

// 导入表单数据
const importForm = reactive({
  file: null
})

// 产品分类选项
const categoryOptions = ref([])

// 树形分类数据
const categoryTreeData = ref([])

// 树形控件属性配置
const categoryTreeProps = {
  label: 'category_name',
  children: 'children',
  value: 'category_id'
}

// 根据分类ID获取分类名称的辅助函数
const getCategoryName = (categoryId) => {
  // 如果没有分类ID，返回提示文本
  if (categoryId === null || categoryId === undefined || categoryId === '') {
    return '未分类';
  }

  // 递归查找分类名称
  const findCategoryName = (categories, id) => {
    for (const category of categories) {
      if (category.category_id === id) {
        return category.category_name;
      }
      if (category.children && category.children.length > 0) {
        const name = findCategoryName(category.children, id);
        if (name) return name;
      }
    }
    return null; // 找不到返回null
  };

  const categoryName = findCategoryName(categoryTreeData.value, categoryId);
  return categoryName || '未知分类';
}

// 获取产品分类树形数据
const getCategoryTreeData = async () => {
  try {
    // 调用API获取产品分类列表数据
    const res = await getProductCategoryList({})

    // 处理响应数据，兼容不同的API响应结构
    let dataList = []

    // 检查响应数据结构
    if (res.data) {
      // 如果有data字段，进一步检查结构
      if (Array.isArray(res.data)) {
        // data直接是数组
        dataList = res.data
      } else if (res.data.data || res.data.categories || res.data.list) {
        // data是一个对象，包含嵌套的数据数组
        dataList = res.data.data || res.data.categories || res.data.list || []
      } else {
        // data是其他结构，尝试直接使用
        dataList = Array.isArray(res.data) ? res.data : []
      }
    } else {
      // 没有data字段，直接使用响应体
      dataList = Array.isArray(res) ? res : (Array.isArray(res.list) ? res.list : [])
    }

    // 更新产品分类树形数据
    categoryTreeData.value = dataList

    // 同时更新扁平化的分类选项用于表格显示
    const flattenCategories = (categories) => {
      let result = [];
      categories.forEach(category => {
        result.push({
          value: category.category_id,
          label: category.category_name
        });
        if (category.children && category.children.length > 0) {
          result = result.concat(flattenCategories(category.children));
        }
      });
      return result;
    };

    categoryOptions.value = flattenCategories(dataList);

    // 打印分类数据用于调试
    console.log('获取到的分类树数据:', dataList);
  } catch (error) {
    console.error('获取产品分类列表失败:', error)
    ElMessage.error('获取产品分类列表失败，请稍后重试！')
  }
}

// 详情对话框相关状态
const detailDialogVisible = ref(false)  // 详情对话框显示状态
const detailLoading = ref(false)        // 详情加载状态
const productDetail = ref({})          // 产品详情数据

// 编辑对话框相关状态
const editDialogVisible = ref(false)    // 编辑对话框显示状态
const editLoading = ref(false)          // 编辑加载状态
const saveLoading = ref(false)          // 保存按钮加载状态
const editFormRef = ref(null)           // 编辑表单引用
const editingProduct = ref({           // 正在编辑的产品数据
  product_name: '',
  cost_price: '',
  retail_price: '',
  wholesale_price: '',
  category_id: '',
  specifications: ''
})

// 批量导入对话框相关状态
const importDialogVisible = ref(false)  // 导入对话框显示状态
const importLoading = ref(false)        // 导入按钮加载状态
const importFormRef = ref(null)         // 导入表单引用
const uploadRef = ref(null)             // 上传组件引用
const importFile = ref(null)            // 导入的文件

// 编辑表单验证规则
const editRules = {
  product_name: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  cost_price: [
    {
      validator: (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          // 空值允许通过验证
          callback();
        } else if (isNaN(value) || Number(value) < 0) {
          // 非数字或负数不通过验证
          callback(new Error('成本价必须是大于等于0的数字'));
        } else {
          // 数字且非负，通过验证
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  retail_price: [
    {
      validator: (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          // 空值允许通过验证
          callback();
        } else if (isNaN(value) || Number(value) < 0) {
          // 非数字或负数不通过验证
          callback(new Error('零售价必须是大于等于0的数字'));
        } else {
          // 数字且非负，通过验证
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  wholesale_price: [
    {
      validator: (rule, value, callback) => {
        if (value === '' || value === null || value === undefined) {
          // 空值允许通过验证
          callback();
        } else if (isNaN(value) || Number(value) < 0) {
          // 非数字或负数不通过验证
          callback(new Error('批发价必须是大于等于0的数字'));
        } else {
          // 数字且非负，通过验证
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  category_id: [
    { required: true, message: '请选择产品分类', trigger: 'change' }
  ]
}

/**
 * 获取产品列表数据
 */
const getProductListData = async () => {
  try {
    loading.value = true

    // 构建分页参数对象，包含搜索条件
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      // 添加搜索参数
      product_name: searchForm.product_name,
      product_code: searchForm.product_code,
      category_id: searchForm.category_id
    }

    // 调用API获取产品列表
    const res = await getProductList(params)

    // 更新分页相关信息
    if (res.pagination) {
      total.value = res.pagination.totalCount || 0
      currentPage.value = res.pagination.currentPage || 1
      pageSize.value = res.pagination.pageSize || 10
    }

    // 根据实际API响应结构调整数据赋值
    // 支持多种可能的数据结构
    if (res.data && Array.isArray(res.data)) {
      productList.value = res.data
    } else if (res.products && Array.isArray(res.products)) {
      productList.value = res.products
    } else if (res.data && res.data.products && Array.isArray(res.data.products)) {
      productList.value = res.data.products
    } else if (Array.isArray(res)) {
      productList.value = res
    } else {
      productList.value = []
    }

    // 如果产品列表中有数据，检查字段是否存在
    if (productList.value.length > 0) {
      console.log('第一个产品的数据结构:', productList.value[0])
      // 检查是否有产品没有分类信息
      productList.value.forEach((product, index) => {
        if (!product.category && product.category_id) {
          console.warn(`产品 ${index} 有分类ID但没有分类信息:`, product.category_id);
        }
      });
    }
  } catch (error) {
    console.error('获取产品列表失败:', error)
    ElMessage.error('获取产品列表失败，请稍后重试！')
  } finally {
    loading.value = false
  }
}

/**
 * 页码改变事件处理函数
 * @param {number} page - 新的页码
 */
const handlePageChange = (page) => {
  currentPage.value = page
  getProductListData()
}

/**
 * 每页条数改变事件处理函数
 * @param {number} size - 新的每页条数
 */
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
  getProductListData()
}

/**
 * 搜索按钮点击事件处理函数
 */
const handleSearch = () => {
  console.log('执行搜索:', searchForm)
  // 根据分页功能实现规范：搜索操作时重置到第一页
  currentPage.value = 1
  getProductListData()
}

/**
 * 重置按钮点击事件处理函数
 */
const handleReset = () => {
  console.log('重置搜索条件')
  // 清空搜索表单
  Object.assign(searchForm, {
    product_name: '',
    product_code: '',
    category_id: ''
  })
  // 重置到第一页
  currentPage.value = 1
  getProductListData()
}

/**
 * 查看产品详情
 * @param {Object} row - 产品数据行
 */
const handleView = async (row) => {
  console.log('查看产品:', row)

  try {
    detailDialogVisible.value = true
    detailLoading.value = true

    // 调用API获取产品详情
    const response = await getProductById(row.product_id)
    productDetail.value = response.product || row
  } catch (error) {
    console.error('获取产品详情失败:', error)
    ElMessage.error('获取产品详情失败，请稍后重试！')

    // 如果API调用失败，使用列表中的数据作为后备方案
    productDetail.value = row
  } finally {
    detailLoading.value = false
  }
}

/**
 * 从详情对话框跳转到编辑
 */
const handleEditFromDetail = () => {
  detailDialogVisible.value = false
  handleEdit(productDetail.value)
}

/**
 * 新增产品按钮点击事件处理函数
 */
const handleAdd = () => {
  // 重置编辑表单数据
  editingProduct.value = {
    product_name: '',
    cost_price: null,
    retail_price: null,
    wholesale_price: null,
    category_id: '',
    specifications: ''
  }
  editDialogVisible.value = true
}

/**
 * 编辑产品
 * @param {Object} row - 产品数据行
 */
const handleEdit = (row) => {
  console.log('编辑产品:', row)

  // 填充编辑表单数据，确保价格字段是数字类型
  editingProduct.value = {
    product_name: row.product_name || '',
    cost_price: row.cost_price && row.cost_price !== '' ? parseFloat(row.cost_price) : '',
    retail_price: row.retail_price && row.retail_price !== '' ? parseFloat(row.retail_price) : '',
    wholesale_price: row.wholesale_price && row.wholesale_price !== '' ? parseFloat(row.wholesale_price) : '',
    category_id: row.category_id || '',
    specifications: row.specifications || ''
  }

  // 如果有product_id，也添加到编辑数据中
  if (row.product_id) {
    editingProduct.value.product_id = row.product_id
  }

  editDialogVisible.value = true
}

/**
 * 编辑对话框关闭事件处理函数
 */
const handleEditClose = () => {
  // 重置表单验证状态
  editFormRef.value?.resetFields()
}

/**
 * 保存产品信息（新增或编辑）
 */
const handleSave = async () => {
  // 表单验证
  try {
    await editFormRef.value.validate()
  } catch (error) {
    console.error('表单验证失败:', error)
    ElMessage.warning('请填写完整的产品信息')
    return
  }

  try {
    saveLoading.value = true

    // 准备提交数据，确保与API接口定义一致
    const submitData = {
      product_name: editingProduct.value.product_name,
      category_id: editingProduct.value.category_id,
      specifications: editingProduct.value.specifications
    }

    // 只有当价格字段有值时才添加到提交数据中
    if (editingProduct.value.cost_price !== '' && editingProduct.value.cost_price !== null && editingProduct.value.cost_price !== undefined) {
      submitData.cost_price = editingProduct.value.cost_price;
    }

    if (editingProduct.value.retail_price !== '' && editingProduct.value.retail_price !== null && editingProduct.value.retail_price !== undefined) {
      submitData.retail_price = editingProduct.value.retail_price;
    }

    if (editingProduct.value.wholesale_price !== '' && editingProduct.value.wholesale_price !== null && editingProduct.value.wholesale_price !== undefined) {
      submitData.wholesale_price = editingProduct.value.wholesale_price;
    }

    // 根据是否有product_id判断是新增还是编辑
    if (editingProduct.value.product_id) {
      // 编辑产品时，需要将product_id包含在提交数据中
      submitData.product_id = editingProduct.value.product_id

      // 编辑产品
      await updateProduct(
        editingProduct.value.product_id,
        submitData
      )
      ElMessage.success('更新产品成功！')
    } else {
      // 新增产品
      await createProduct(submitData)
      ElMessage.success('新增产品成功！')
    }

    // 关闭编辑对话框
    editDialogVisible.value = false

    // 重新加载列表数据
    getProductListData()
  } catch (error) {
    console.error('保存产品失败:', error)

    // 显示具体的错误信息
    const errorMessage = error.response?.data?.message ||
                         error.message ||
                         '保存产品失败，请稍后重试！'

    // 如果有详细的错误信息，显示给用户
    if (error.response?.data?.errors) {
      const errorDetails = error.response.data.errors.map(err => err.msg).join(', ')
      ElMessage.error(`${errorMessage}: ${errorDetails}`)
    } else {
      ElMessage.error(errorMessage)
    }
  } finally {
    saveLoading.value = false
  }
}

/**
 * 删除产品
 * @param {Object} row - 产品数据行
 */
const handleDelete = async (row) => {
  try {
    // 使用ElMessageBox进行二次确认
    await ElMessageBox.confirm(
      `确定要删除产品 "${row.product_name}" 吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    // 调用删除API
    await deleteProduct(row.product_id)

    // 删除成功提示
    ElMessage.success('删除产品成功！')

    // 重新加载列表数据
    // 如果当前页只有一条数据且不是第一页，则回退到上一页
    if (productList.value.length === 1 && currentPage.value > 1) {
      currentPage.value = currentPage.value - 1
    }
    getProductListData()
  } catch (error) {
    // 用户取消删除
    if (error === 'cancel') {
      return
    }
    // 删除失败处理
    const errorMessage = error.response?.data?.message ||
                         error.message ||
                         '删除产品失败，请稍后重试！'
    ElMessage.error(errorMessage)
  }
}

/**
 * 批量导入按钮点击事件处理函数
 */
const handleImport = () => {
  // 重置导入表单
  importFormRef.value?.resetFields()
  // 清空上传文件
  uploadRef.value?.clearFiles()
  importFile.value = null
  // 显示导入对话框
  importDialogVisible.value = true
}

/**
 * 文件选择变化事件处理函数
 * @param {Object} file - 上传的文件对象
 */
const handleFileChange = (file) => {
  importFile.value = file.raw
}

/**
 * 文件移除事件处理函数
 */
const handleFileRemove = () => {
  importFile.value = null
}

/**
 * 批量导入提交事件处理函数
 */
const handleImportSubmit = async () => {
  // 检查是否选择了文件
  if (!importFile.value) {
    ElMessage.warning('请选择要导入的Excel文件')
    return
  }

  try {
    importLoading.value = true

    // 调用API导入产品
    const response = await importProducts(importFile.value)

    // 导入成功提示
    ElMessage.success(response.message || '产品导入成功！')

    // 关闭导入对话框
    importDialogVisible.value = false

    // 重新加载产品列表
    currentPage.value = 1
    getProductListData()
  } catch (error) {
    console.error('导入产品失败:', error)

    // 显示具体的错误信息
    const errorMessage = error.response?.data?.message ||
                         error.message ||
                         '产品导入失败，请稍后重试！'

    ElMessage.error(errorMessage)
  } finally {
    importLoading.value = false
  }
}

/**
 * 下载导入模板
 */
const downloadTemplate = () => {
  // 创建一个工作簿
  const wb = XLSX.utils.book_new();

  // 创建示例数据
  const data = [
    ['产品名称', '成本价', '零售价', '批发价', '产品分类ID', '产品分类名称', '产品规格'],
    ['示例产品1', 100, 150, 120, '', '电子产品', '红色, 大号'],
    ['示例产品2', 200, 250, 220, '', '家居用品', '蓝色, 中号'],
    ['示例产品3', 300, 350, 320, '', '服装', '黑色, 小号']
  ];

  // 创建工作表
  const ws = XLSX.utils.aoa_to_sheet(data);

  // 设置列宽
  ws['!cols'] = [
    { wch: 15 }, // 产品名称
    { wch: 10 }, // 成本价
    { wch: 10 }, // 零售价
    { wch: 10 }, // 批发价
    { wch: 12 }, // 产品分类ID
    { wch: 15 }, // 产品分类名称
    { wch: 20 }  // 产品规格
  ];

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, '产品导入模板');

  // 导出文件
  XLSX.writeFile(wb, '产品导入模板.xlsx');
}

/**
 * 处理表格选择变化
 * @param {Array} selection - 选中的行数据
 */
const handleSelectionChange = (selection) => {
  selectedProducts.value = selection
}

/**
 * 批量删除产品
 */
const handleBatchDelete = async () => {
  try {
    // 使用ElMessageBox进行二次确认
    await ElMessageBox.confirm(
      `确定要删除选中的 ${selectedProducts.value.length} 个产品吗？此操作不可恢复！`,
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: false
      }
    )

    // 准备要删除的产品ID数组
    const productIds = selectedProducts.value.map(product => product.product_id)

    // 调用批量删除API
    const data = {
      action: 'delete',
      data: {
        ids: productIds
      }
    }

    await batchProductOperation(data)

    // 删除成功提示
    ElMessage.success('批量删除产品成功！')

    // 清空选中项
    selectedProducts.value = []

    // 重新加载列表数据
    // 如果当前页所有数据都被删除且不是第一页，则回退到上一页
    if (selectedProducts.value.length === productList.value.length && currentPage.value > 1) {
      currentPage.value = currentPage.value - 1
    }
    getProductListData()
  } catch (error) {
    // 用户取消删除
    if (error === 'cancel') {
      return
    }
    // 删除失败处理
    const errorMessage = error.response?.data?.message ||
                         error.message ||
                         '批量删除产品失败，请稍后重试！'
    ElMessage.error(errorMessage)
  }
}

// 组件挂载时获取产品列表数据和分类树形数据
onMounted(() => {
  getProductListData()
  getCategoryTreeData()
})
</script>

<style scoped>
/**
 * 产品管理页面样式部分
 * 使用scoped属性确保样式只作用于当前组件
 */

/* 搜索容器样式 */
.search-container {
  margin-bottom: 20px;
}

/* 搜索卡片样式 */
.search-card {
  border: 1px solid #e4e7ed;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 0;
}

/* 搜索表单项样式 */
.search-form .el-form-item {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* 搜索输入框样式 */
.search-input {
  width: 200px;
}

/* 搜索选择框样式 */
.search-select {
  width: 200px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  gap: 10px;
  margin-left: auto !important;
}

/* 搜索按钮样式 */
.search-button {
  white-space: nowrap;
}

/* 重置按钮样式 */
.reset-button {
  white-space: nowrap;
}

/* 产品数据表格 */
.product-table {
  width: 100%;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 表格头部样式 */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 分页容器样式 */
.pagination-container {
  text-align: right;
  margin-top: 20px;
}

/* 详情容器样式 */
.detail-container {
  min-height: 200px;
}

/* 对话框底部操作区域样式 */
.dialog-footer {
  text-align: right;
}

/* 价格列样式 */
.price-column {
  text-align: right;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-form {
    flex-direction: column;
  }

  .search-form .el-form-item {
    width: 100%;
  }

  .search-input,
  .search-select {
    width: 100%;
  }

  .button-group {
    margin-left: 0 !important;
    width: 100%;
    justify-content: center;
  }
}
</style>
